<!--修改图形-->
<!-- Draw ,Modify， select ,snap-->
<template>
  <div>
    <div id="map" class="mapC"></div>
    <div class="select_c">
      <el-select v-model="value" placeholder="请选择！" @change="selectChange">
        <el-option
          v-for="(item, index) in selecetData"
          :key="index"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button @click="changeSnap">修改绘制</el-button>
      <el-button @click="changeSnapCanal">取消修改</el-button>
    </div>
  </div>
</template>

<script>
import 'ol/ol.css'
// import Draw from 'ol/interaction/Draw'
import {Draw, Modify, Snap, Select} from 'ol/interaction'
import DoubleClickZoom from 'ol/interaction/DoubleClickZoom'
import Map from 'ol/Map'
// import Polygon from 'ol/geom/Polygon'
import VEctor from 'ol/layer/Vector'
import View from 'ol/View'
import XYZ from 'ol/source/XYZ'
// import { Style, Fill, Stroke, Circle } from 'ol/style'
// import Tile from 'ol/layer/Tile'
import {Vector as VectorSource} from 'ol/source'
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer'
export default {
  name: 'index',
  data () {
    return {
      value: '',
      map: null,
      modify: null,
      raster: null,
      source: null,
      select: null,
      draw: null,
      snap: null,
      dblClickInteraction: null,
      drawSoruceVectorLayer: null,
      vector: null,
      selecetData: [
        {
          label: 'Point',
          value: 'Point'
        },
        {
          label: 'LineString',
          value: 'LineString'
        },
        {
          label: 'Polygon',
          value: 'Polygon'
        }
      ]
    }
  },
  mounted () {
    this.initMap()
  },
  methods: {
    initMap () {
      // this.raster = new TileLayer({
      //   source: new OSM()
      // })
      this.raster = new TileLayer({
        name: 'map1',
        title: 'map1',
        source: new XYZ({
          url: '/mapServe/tdt/map/{z}/{x}/{y}.png'
        }),
        visible: true
      })
      var raster2 = new TileLayer({
        name: 'mapi2',
        title: 'mapi2',
        source: new XYZ({
          url: '/mapServe/tdt/mapi/{z}/{x}/{y}.png'
        }),
        visible: true
      })
      this.source = new VectorSource({wrapX: false})
      this.vector = new VectorLayer({
        source: this.source
        // style: new Style({
        //   fill: new Fill({
        //     color: 'rgba(255, 255, 255, 0.2)'
        //   }),
        //   stroke: new Stroke({
        //     color: '#ffcc33',
        //     width: 2
        //   }),
        //   image: new Circle({
        //     radius: 7,
        //     fill: new Fill({
        //       color: '#ffcc33'
        //     })
        //   })
        // })
      })
      this.map = new Map({
        layers: [this.raster, raster2, this.vector],
        target: 'map',
        view: new View({
          center: [108.2, 29.07],
          zoom: 4,
          projection: 'EPSG:4326'
        })
      })
      this.drawSoruceVectorLayer = new VEctor({
        source: this.source,
        zIndex: 50
      })
      this.select = new Select()
      this.map.addLayer(this.drawSoruceVectorLayer)
      this.modify = new Modify({
        // source: this.source
        features: this.select.getFeatures()
      })
    },
    selectChange (val) {
      this.getdrawD(val)
    },
    changeSnap () {
      this.map.addInteraction(this.modify)
      this.snap = new Snap({source: this.source})
      this.map.addInteraction(this.snap)
      this.map.addInteraction(this.select)
    },
    changeSnapCanal () {
      this.map.removeInteraction(this.modify)
      this.map.removeInteraction(this.snap)
      this.map.removeInteraction(this.select)
    },
    getd (evt) {
      // 绘图双击结束时的回调，给地图添加上双击放大地图的事件
      let that = this
      that.map.removeInteraction(this.draw)
      setTimeout(() => {
        that.map.addInteraction(this.dblClickInteraction)
      }, 200)
    },
    getdrawD (value) {
      // dblClickInteraction 绘制结束前去掉地图双击方法地图的事件=====start
      this.dblClickInteraction = this.map
        .getInteractions()
        .getArray()
        .find(interaction => {
          return interaction instanceof DoubleClickZoom
        })
      this.map.removeInteraction(this.dblClickInteraction)
      // =============================================================end
      this.drawSoruceVectorLayer.getSource().clear()
      this.draw = new Draw({
        source: this.source,
        type: value
        //  设置后移动鼠标绘制图形
        // freehand: true
        // geometryFunction: geometryFunction
      })
      // let that = this
      // 回调时注意this的指向问题==============
      this.draw.on('drawend', this.getd)
      this.map.addInteraction(this.draw)
    }
    // }
  }
}
</script>

<style scoped>
  .mapC{
    width: 100vw;
    height: 100vh;
  }
  .select_c{
    position: absolute;
    top: 0;
    left: 0;
  }
</style>
